<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        table tr,th,td{
            border:1px solid #ccc;
        }
        #editForm{
            position:absolute;top:120px; left:35%;
            border:1px dotted green;
            background:#c0c0c0;
            display: none;
            padding:50px;
        }
    </style>
</head>
<body>
<form action="/edit" method="post" id="editForm">
    <p id="idBox" style="display:none;">
        <code>id:&emsp;</code>
        <input type="number" name="id"/>
    </p>
    <p>
        <code>address:&emsp;</code>
        <input type="text" name="address"/>
    </p>
    <p>
        <code>name:&emsp;</code>
        <input type="text" name="name"/>
    </p>
    <p>
        <code>phone:&emsp;</code>
        <input type="text" name="phone"/>
    </p>
    <p>
        <button type="submit">修改</button>&emsp;&emsp;&emsp;
        <button type="button">关闭</button>
    </p>
</form>
<table style="width:600px; margin:120px auto; text-align:center; border:1px solid #ccc;">
    <thead>
    <th>id</th>
    <th>address</th>
    <th>name</th>
    <th>phone</th>
    <th>操作</th>
    </thead>
    <c:forEach items="${users}" var="user">
    <tr>
        <td column="id">${user.id}</td>
        <td column="address">${user.address}</td>
        <td column="name">${user.name}</td>
        <td column="phone">${user.phone}</td>
        <td>
            <a href="javascript:void(0)" class="edit" id="${user.id}">编辑</a>
            <a href="/del?id=${user.id}">删除</a>
        </td>
    </tr>
    </c:forEach>
    <tfoot>
        <tr>
            <th colspan="5"><button style="float:right;right:20px;" class="addBtn">新增</button></th>
        </tr>
    </tfoot>
</table>
<a href="/logout">退出</a>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){

    $('#editForm').on('click','button',function(){
        $('#editForm').hide();
    });
    $('a.edit').click(function(){
        $('#editForm').prop('action','/edit');
        $('#idBox').hide();
        $('#editForm input[name="id"]').val($(this).parents('tr:first').find('td[column="id"]').text());
        $('#editForm input[name="address"]').val($(this).parents('tr:first').find('td[column="address"]').text());
        $('#editForm input[name="name"]').val($(this).parents('tr:first').find('td[column="name"]').text());
        $('#editForm input[name="phone"]').val($(this).parents('tr:first').find('td[column="phone"]').text());
        $('#editForm button[type="submit"]').text("修改");
        $('#editForm').show();
    });
    $('button.addBtn').click(function(){
        $('#editForm').prop('action','/add');
        $('#idBox').show();
        $('#editForm input').val('');
        $('#editForm button[type="submit"]').text("添加");
        $('#editForm').show();
    })
})
</script>
</body>
</html>
